import presetIcons from '@unocss/preset-icons'
import presetUno from '@unocss/preset-uno'
import transformerDirectives from '@unocss/transformer-directives'
// import Decimal from 'decimal.js'
// import { defineConfig } from 'unocss'
// import { FileSystemIconLoader } from '@iconify/utils/lib/loader/node-loaders'
import transformerVariantGroup from '@unocss/transformer-variant-group'
// import { breakpointsQuasar } from '@vueuse/core'
import { mergeConfigs } from '@unocss/core'
import config from './.nuxt/uno.config.mjs'

export default mergeConfigs([config, {
  autocomplete: {
    templates: [],
    shorthands: {},
  },
  // ...UnoCSS options
  rules: [
    // [
    //   /^(p|m)(-?([trlbxy]))?-safe$/,
    //   ([, $1, $2, $3, $4]) => {
    //     const name = { p: 'padding', m: 'margin' }[$1] ?? ''
    //     return {
    //       // $1,
    //       // $2,
    //       // $3,
    //       // $4,
    //       // a: undefined,
    //       [`${name}-top`]: ['t', 'y'].includes($3)
    //         ? 'env(safe-area-inset-top, 0px)'
    //         : undefined,
    //       [`${name}-right`]: ['r', 'x'].includes($3)
    //         ? 'env(safe-area-inset-right, 0px)'
    //         : undefined,
    //       [`${name}-bottom`]: ['b', 'y'].includes($3)
    //         ? 'env(safe-area-inset-bottom, 0px)'
    //         : undefined,
    //       [`${name}-left`]: ['l', 'x'].includes($3)
    //         ? 'env(safe-area-inset-left, 0px)'
    //         : undefined,
    //       [name]: $3
    //         ? undefined
    //         : 'env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px)',
    //     }
    //   },
    // ],
    // [
    //   /([wh])-safe-([trbl])/,
    //   ([_, $1, $2]) => ({
    //     [{ w: 'width', h: 'height' }[$1]]: `env(safe-area-inset-${
    //       {
    //         t: 'top',
    //         r: 'right',
    //         b: 'bottom',
    //         l: 'left',
    //       }[$2]
    //     }, 0px)`,
    //   }),
    // ],
  ],
  presets: [
    presetUno({
      // prefix: 'u-',
      // attributifyPseudo: true,
      // important: 'html',
    }),
    presetIcons({
      prefix: ['i-', 'icon-'],
      scale: 1,
      warn: true,
      collections: {},
      extraProperties: {
        'display': 'inline-block',
        'vertical-align': 'middle',
        // ...
      },
    }),
  ],
  theme: {
    // colors: {},
    // breakpoints: {
    // },
    // breakpoints: Object.entries(breakpointsQuasar).reduce(
    //   (acc, [key, value]) => {
    //     acc[key] = `${value}px`
    //     return acc
    //   },
    //   {
    //     2xl:''
    //   },
    // ),
  },
  extendTheme: (theme) => {
    // console.log(theme.breakpoints)
    return {
      ...theme,
    }
  },
  variants: [],
  postprocess: [
    // (util) => {
    //   const rpxRE = /(-?[.\d]+)rpx/g
    //   if (/([.\d]+)rpx/.test(util.selector)) {
    //     util.entries.forEach((i) => {
    //       const value = i[1]
    //       if (typeof value === 'string' && rpxRE.test(value)) {
    //         i[1] = value.replace(
    //           rpxRE,
    //           (m, n) => `${new Decimal(n).div(16).toNumber()}rem`,
    //         )
    //       }
    //     })
    //   }
    // },
  ],
  shortcuts: {},
  transformers: [transformerDirectives(), transformerVariantGroup()],
}])
